<template>
	<view class="content" style="background-color: #f8f8f8;">
		<!-- 背景图 -->
		<view class="popup-bgimg">
			<image class="popup-bgimg" @tap="showSheet" :src="_user_info.pictureBanner" :style="{ width: '100%', height: '100%',  }"></image>
		</view>
		<!-- 内容区 -->
		<!-- <view class="popup-content" style="border: 1px solid green;border-top-left-radius: 26px;border-top-right-radius: 26px;"> -->
		<view style="padding-top: 10px;padding-left: 14px;padding-right: 14px; border-top-left-radius: 26px;border-top-right-radius: 26px; padding-bottom: 20rpx;background-color: #fff;">
			<view style="display: flex;height: 100px;line-height: 100px;">
				<!-- 头像 -->
				<image @click="showAvatar(_user_info.miniAvatar)" mode="aspectFill" :src="_user_info.miniAvatar" :style="{ width: '80px', height: '80px', borderRadius: '50px', marginRight: '16px', marginTop: '5px' }"/>
				<!-- 昵称账号 -->
				<view style="height: 40px;margin-top: 30px;">
					<view style="color: black;font-size: 30rpx;line-height: 20px;">{{_user_info.nickname}}</view>
					<view style="color: #989898;font-size: 26rpx;line-height: 20px;">账号：{{_user_info.account}}</view>
				</view>
				<!-- 点赞 -->
				<view style="height: 40px;margin-top: 36px;position: absolute;right: 30rpx;">
					<view class="ichat ichat31dianzan" style="line-height: 14px;width: 40px;text-align: center;font: 16px;"></view>
					<view style="color: #000;font-size: 18rpx;line-height: 10px;width: 40px;text-align: center;">9999999</view>
				</view>
			</view>
			<!-- 详细信息 -->
			<view @click="changeMyInfo" style="display: flex;line-height: 20px;color: #939393;font-size: 24rpx;width: 100%;flex-wrap: wrap;">
				<!-- 性别 -->
				<view class="ichat ichatman" v-show="_user_info.sex == 1"></view>
				<view class="ichat ichatnv" v-show="_user_info.sex == 2" style="font-size: 12px;"></view>
				<view v-show="_user_info.sex == 1" style="margin-left: 15rpx;">男</view>
				<view v-show="_user_info.sex == 2" style="margin-left: 15rpx;">女</view> 
				<!-- 年龄 -->
				<view v-show="_user_info.birthday" style="display: flex;">
					<view class="ichat ichatfengefu"></view>
					<view>{{ age }}</view>
				</view>
				<!-- 出生日期 -->
				<view v-show="_user_info.birthday" style="display: flex;">
					<view class="ichat ichatfengefu"></view>
					<view>{{ formattedBirthday }}</view>
					<view v-if="constellation" style="margin-left: 10rpx;">{{ constellation }}</view>
				</view>
				<!-- 手机号 -->
				<view v-show="_user_info.phone" style="display: flex;">
					<view class="ichat ichatfengefu"></view>
					<view>{{_user_info.phone}}</view>
				</view>
				<!-- 地区 -->
				<view v-show="_user_info.area" style="display: flex;">
					<view class="ichat ichatfengefu"></view>
					<view>{{_user_info.area}}</view>
				</view>
				<!-- 公司 -->
				<view v-show="_user_info.company" style="display: flex;">
					<view class="ichat ichatfengefu"></view>
					<view>{{_user_info.company}}</view>
				</view>
				<!-- 职业 -->
				<view v-show="_user_info.work" style="display: flex;">
					<view class="ichat ichatfengefu"></view>
					<view>{{_user_info.work}}</view>
				</view>
				<!-- 邮箱 -->
				<view v-show="_user_info.email" style="display: flex;">
					<view class="ichat ichatfengefu"></view>
					<view>{{_user_info.email}}</view>
				</view>
			</view>
			<!-- 等级 -->
			<view style="display: flex;line-height: 26px;">
				<view class="ichat ichattaiyang" style="margin-right: 6rpx;"></view>
				<view class="ichat ichatyueliang" style="margin-right: 6rpx;"></view>
				<view class="ichat ichatxingxing" style="margin-right: 6rpx;"></view>
				<view class="ichat ichatxingxing" style="margin-right: 6rpx;"></view>
				<view class="ichat ichatxingxing" style="margin-right: 6rpx;"></view>
			</view>
			<!-- 个性签名 -->
			<u-cell-group :border='false'>
				<u-cell-item style="height: 25px;" :title="_user_info.signature" @click="changeUpdate({ title: '个性签名',type: 'signature',  value: _user_info.signature })" :center="true" :titleStyle="titleColor"></u-cell-item>
			</u-cell-group>
		</view>
					
		<!-- 照片墙 -->
		<scroll-view scroll-y="true" >
			<view style="background-color: white;width: 100%;height: 800rpx;margin-top: 30rpx;padding: 0 14px;">
				<!-- 空间内容 -->
				<u-cell-group :border='false'>
					<u-cell-item title="空间" :center="true" value="分享新鲜事" :titleStyle="{color: 'black',marginLeft: '20rpx',fontSize: '14px'}" :valueStyle="{color:'#4c6bdc',fontSize:'12px'}"><u-icon slot="icon" class="ichat ichatQQzone" style="font-size: 20px;position: absolute;left: 0;"></u-icon></u-cell-item>
				</u-cell-group>
				<view style="white-space: nowrap;">
					<scroll-view scroll-x="true">
						<image :style="{ width: '96px', height: '96px',paddingRight:'2px' }" src="/static/image/circle/1.jpg"></image>
						<image :style="{ width: '96px', height: '96px',paddingRight:'2px' }" src="/static/image/circle/2.jpg"></image>
						<image :style="{ width: '96px', height: '96px',paddingRight:'2px' }" src="/static/image/circle/3.jpg"></image>
						<image :style="{ width: '96px', height: '96px',paddingRight:'2px' }" src="/static/image/circle/4.jpg"></image>
						<image :style="{ width: '96px', height: '96px',paddingRight:'2px' }" src="/static/image/circle/5.jpg"></image>
					</scroll-view>
				</view>
				<!-- 精选照片 -->
				<u-cell-group :border='false' style="margin-top: 20px;">
					<u-cell-item title="精选照片" :center="true" :titleStyle="{color: 'black',marginLeft: '20rpx',fontSize: '14px'}" ><u-icon slot="icon" class="ichat ichatjiugongge_grid-nine" style="font-size: 20px;position: absolute;left: 0;"></u-icon></u-cell-item>
				</u-cell-group>
				<view style="white-space: nowrap;">
					<scroll-view scroll-x="true">
						<image :style="{ width: '96px', height: '96px',paddingRight:'2px' }" src="/static/image/circle/5.jpg"></image>
						<image :style="{ width: '96px', height: '96px',paddingRight:'2px' }" src="/static/image/circle/4.jpg"></image>
						<image :style="{ width: '96px', height: '96px',paddingRight:'2px' }" src="/static/image/circle/3.jpg"></image>
						<image :style="{ width: '96px', height: '96px',paddingRight:'2px' }" src="/static/image/circle/2.jpg"></image>
						<image :style="{ width: '96px', height: '96px',paddingRight:'2px' }" src="/static/image/circle/1.jpg"></image>
					</scroll-view>
				</view>
			</view>
		</scroll-view>
		<!-- </view> -->
				
		<!-- 底部按钮 -->
		<view class="footer">
			<view style="display: flex;">
				<u-button size="medium" :custom-style="customStyle" style="height: 40px;color: #000;width: 220rpx;">个性名片</u-button>
				<u-button @click="changeMyInfo" size="medium" :custom-style="customStyle" style="height: 40px;color: #000;width: 220rpx;">编辑资料</u-button>
				<u-button size="medium" :custom-style="customStyle" style="height: 40px;background-color: #01a0fe;color: #fff;width: 220rpx;">发消息</u-button>
			</view>
		</view>
		<u-action-sheet :list="list" v-model="show" border-radius="25" safe-area-inset-bottom @click="clickAction"></u-action-sheet>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	name: 'firendCircle',
	data() {
		return {
			titleColor: { color: 'black', lineHeight: '20px',fontSize: '12px',letterSpacing: '2rpx',position:'absolute',left:'0',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis',width:'600rpx', },
			show: false, //u-action-sheet  show
			list: [
				{ text: '查看封面', fontSize: '28' },
				{ text: '更换相册封面', fontSize: '28' },
			],
			customStyle: {
				width: '120px'
			}
		};
	},
	computed: {
		// 格式化出生日期
		formattedBirthday() {
			if (!this._user_info.birthday) return '';
			const date = new Date(this._user_info.birthday);
			const month = date.getMonth() + 1; // getMonth() returns 0-11
			const day = date.getDate();
			return `${month}月${day}日`;
		},
		// 计算年龄
		age() {
		    if (!this._user_info.birthday) return '';
		    const birthDate = new Date(this._user_info.birthday);
		    const today = new Date();
		    let age = today.getFullYear() - birthDate.getFullYear();
		    const monthDifference = today.getMonth() - birthDate.getMonth();
		    
		    if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < birthDate.getDate())) {
		        age--;
		    }
		    
		    return age + '岁';
		},
		constellation() {
			if (!this._user_info.birthday) return '';
			const birthday = new Date(this._user_info.birthday);
			const month = birthday.getMonth() + 1; // getMonth() returns 0-11
			const day = birthday.getDate();
			return this.getConstellation(month, day);
		}
	},
	methods: {
		//自定义标题栏按钮
		onNavigationBarButtonTap({ index }) {
			if (index == 0) {
				
			} else if (index == 1) {
				//返回按钮
				this.$u.route({ type: 'back' });
			}
		},
		//计算星座
		getConstellation(month, day) {
			const s = ["摩羯座", "水瓶座", "双鱼座", "白羊座", "金牛座", "双子座", "巨蟹座", "狮子座", "处女座", "天秤座", "天蝎座", "射手座"];
			const arr = [20, 19, 20, 20, 21, 21, 22, 22, 23, 23, 22, 21];
			return day <= arr[month - 1] ? s[month - 1] : s[month % 12];
		},
		//打开底部更换相册封面弹窗
		showSheet() {
			this.show = true;
		},
		//点击相册封面弹窗选择项
		clickAction(index) {
			if (index == 0) {
				uni.previewImage({
					urls: [this._user_info.pictureBanner],
				});
			} else if(index == 1) {
				this.$u.route('pages/chooseBgImg/chooseBgImg');
			}
		},
		//点击自定义组件相机按钮
		linkToRelease() { 
			this.$u.route('pages/releaseFirendCircle/releaseFirendCircle');
		},
		// 跳转至修改页面
		changeUpdate(params) {
			this.$u.route('pages/updateMyInfo/updateMyInfo', {
				title: params.title,
				type: params.type,
				value: params.value,
			});
		},
		// 预览头像
		showAvatar(url) {
			uni.previewImage({
				urls: [url],
			});
		},
		// 跳转至个人详情
		changeMyInfo(){
			uni.navigateTo({
				url: '/pages/myInfo/myInfo'
			});
		},
	},
	//下拉刷新
	async onPullDownRefresh() {
		uni.stopPullDownRefresh();
	}
};
</script>

<style lang="scss" scoped>
	.popup-bgimg {
		height: 400rpx;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		position: relative;
	}
	.popup-content {
	// 	position: absolute;
	// 	top: 380rpx;
	// 	width: 100%; 
	// 	// height: 370rpx;
	// 	height: 100%;
	// 	background-color: #fff;
	// 	border-top-left-radius: 14px;
	// 	border-top-right-radius: 14px;
	// 	border-bottom-left-radius: 0;
	// 	border-bottom-right-radius: 0;
	// 	border: 1px solid red;
	}
	.footer{
		background-color: #fff;
		position: absolute;
		bottom: 0;
		padding: 10px 14px;
		width: 100%;
	}
	page {
		background-color: #ffffff;
	}
	.comment-hover-class {
		// background-color: #f3dada;
		background-color: #e2e2e2;
	}
	image {
		will-change: transform;
	}
	// .content {
	// 	&-imgbox {
	// 		position: relative;
	// 		.bgimg {
	// 			width: 100%;
	// 			height: 400rpx;
	// 			z-index: -1;
	// 		}
	// 		.headimg {
	// 			width: 140rpx;
	// 			height: 140rpx;
	// 			border-radius: 50px;
	// 			position: absolute;
	// 			left: 30rpx;
	// 			bottom: -10rpx;
	// 		}
	// 	}
	// }
</style>
